<!--
 * @Descripttion: 分类筛选器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月26日15:59:52
 * @LastEditors:
 * @LastEditTime:
-->

<template>
    <div class="sc-select-filter">
        <div v-if="data.length<=0" class="sc-select-filter__no-data">
            暂无数据
        </div>
        <div v-for="item in data" :key="item.key" class="sc-select-filter__item">
            <div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label></div>
            <div class="sc-select-filter__item-options">
                <ul>
                    <div style="display:flex;" v-for="option in item.options" :key="option.value">
                        <li v-if="option.hasOwnProperty('disabled')" :class="option.disabled==true?'disable':'enable'" @click="select(option, item)">
                            <div>
                                <el-icon v-if="option.icon">
                                    <component :is="option.icon" />
                                </el-icon>
                                <span>{{option.label}}</span>
                            </div>
                        </li>
                        <li v-else :class=" {'active':selected[item.key]&&selected[item.key].includes(option.value)}" @click="select(option, item)">
                            <div>
                                <el-icon v-if="option.icon">
                                    <component :is="option.icon" />
                                </el-icon>
                                <span>{{option.label}}</span>
                            </div>
                        </li>
                    </div>

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: { type: Array, default: () => [] },
        selectedValues: { type: Object, default: () => { return {} } },
        labelWidth: { type: Number, default: 80 },
        outputValueTypeToArray: { type: Boolean, default: false }
    },
    data() {
        return {
            selected: {}
        }
    },
    watch: {
        data(val) {
            val.forEach(item => {
                this.selected[item.key] = this.selectedValues[item.key] ||
                    (Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
            })
        }
    },
    computed: {
        selectedString() {
            var outputData = JSON.parse(JSON.stringify(this.selected))
            for (var key in outputData) {
                outputData[key] = outputData[key].join(",")
            }
            return outputData
        }
    },
    mounted() {
        //默认赋值
        this.data.forEach(item => {
            this.selected[item.key] = this.selectedValues[item.key] ||
                (Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
        })
    },
    methods: {
        select(option, item) {
            //判断单选多选
            if (item.multiple) {
                //如果多选选择的第一个
                if (option.value === item.options[0].value) {
                    //就赋值第一个的值
                    this.selected[item.key] = [option.value]
                } else {
                    //如果选择的值已有
                    if (this.selected[item.key].includes(option.value)) {
                        //删除选择的值
                        this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === option.value), 1)
                        //当全删光时，把第一个选中
                        if (this.selected[item.key].length == 0) {
                            this.selected[item.key] = [item.options[0].value]
                        }
                    } else {
                        //未有值的时候，追加选中值
                        this.selected[item.key].push(option.value)
                        //当含有第一个的值的时候，把第一个删除
                        if (this.selected[item.key].includes(item.options[0].value)) {
                            this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === item.options[0].value), 1)
                        }
                    }
                }
            } else {
                //单选时，如果点击了已有值就赋值
                if (!this.selected[item.key].includes(option.value)) {
                    this.selected[item.key] = [option.value]
                } else {
                    return false
                }
            }
            this.change()
        },
        change() {
            if (this.outputValueTypeToArray) {
                this.$emit('onChange', this.selected)
            } else {
                this.$emit('onChange', this.selectedString)
            }
        }
    }
}
</script>

<style scoped>
.enable {
    pointer-events: none;
    background: var(--el-color-primary) !important;
    color: #fff;
    font-weight: bold;
}
.disable {
    pointer-events: none;
    opacity: 0.5;
}
.sc-select-filter {
    width: 100%;
}
.sc-select-filter__item {
    display: flex;
}
.sc-select-filter__item-title {
    width: 80px;
}
.sc-select-filter__item-title label {
    font-size: 12px;
    padding-top: 13px;
    display: inline-block;
}
.sc-select-filter__item-options {
    flex: 1;
    border-bottom: 1px dashed var(--el-border-color-light);
}
.sc-select-filter__item-options ul {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
}
.sc-select-filter__item-options li {
    list-style: none;
    cursor: pointer;
    height: 28px;
    padding: 0 15px;
    border-radius: 32px;
    margin: 0 10px 10px 0;
    display: flex;
    align-items: center;
    background: var(--el-color-primary-light-9);
}
.sc-select-filter__item-options li .el-icon {
    margin-right: 3px;
    font-size: 16px;
}
.sc-select-filter__item-options li:hover {
    color: var(--el-color-primary);
}
.sc-select-filter__item-options li.active {
    background: var(--el-color-primary);
    color: #fff;
    font-weight: bold;
}
.sc-select-filter__item:last-of-type .sc-select-filter__item-options {
    border: 0;
}

.sc-select-filter__no-data {
    color: #999;
}
</style>
